<template>
  <el-container class="home">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <h1 class="logo" v-show="!isCollapse">Manager System</h1>
      <el-scrollbar>
        <el-menu
          router
          :collapse="isCollapse"
          :collapse-transition="false"
          background-color="#1e2c3c"
          text-color="white"
          style="border: none"
        >
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <template v-slot:title>
              <span>首页</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/user">
            <i class="el-icon-user-solid"></i>
            <template v-slot:title>
              <span>用户管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/article">
            <i class="el-icon-s-management"></i>
            <template v-slot:title>
              <span>职位管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/deal">
            <i class="el-icon-s-management"></i>
            <template v-slot:title>
              <span>处理申请</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/category">
            <i class="el-icon-menu"></i>
            <template v-slot:title>
              <span>分类管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/message">
            <i class="el-icon-s-order"></i>
            <template v-slot:title>
              <span>留言管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/comment">
            <i class="el-icon-s-claim"></i>
            <template v-slot:title>
              <span>评论管理</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header>
        <div class="menu-option">
          <i
            :class="[isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold']"
            @click="isCollapse ? (isCollapse = false) : (isCollapse = true)"
          ></i>
          <mini-nav
            :thing="$route.path.split('/')[2]"
            :operation="
              $route.path.split('/')[3] ? $route.path.split('/')[3] : ''
            "
          ></mini-nav>
        </div>
        <div class="user-option">
          <el-avatar :size="50" :src="userAvatar"></el-avatar>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="escLogin">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-main>
        <!-- 二级路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MiniNav from '@/components/MiniNav'
export default {
  name: 'Admin',
  components: {
    MiniNav
  },
  data () {
    return {
      isCollapse: false,
      userAvatar: ''
    }
  },
  created () {
    // 发送请求, 获取登录用户的信息
    this.$http.get('/login/getinfo').then(res => {
      const { code, result } = res
      if (code == 0) {
        // 获取用户头像
        this.userAvatar = result.avatar
      } else {
        window.localStorage.removeItem('token')
      }
    })
  },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'escLogin':
          localStorage.removeItem('token')
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '退出成功!',
            showClose: true,
            duration: 1500
          })
          break
        case 'modifyPass':
          this.$message({
            type: 'info',
            message: '功能尚未开发额😥',
            showClose: true
          })
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
// 引入主题配色
@import 'styles/theme.styl';

.home {
  height: 100vh;

  .el-aside {
    background-color: $blackdark;
    overflow-y: hidden;

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      font-size: 26px;
      font-weight: bold;
      color: $white;
      font-family: 'Times New Roman', Times, serif;
    }

    .el-scrollbar {
      height: calc(100% - 60px);
    }

    .el-scrollbar >>> .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

  .el-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $white;

    .menu-option {
      float: left;
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        font-size: 30px;
        color: $grey;
        margin-right: 30px;
      }
    }

    .user-option {
      float: right;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-dropdown {
        margin-top: 30px;
        margin-left: 5px;
      }
    }
  }

  .el-main {
    padding: 40px 60px;
    // display:flex
    // justify-content: center
    // align-items: center
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2) inset;
    background-color: $white;
  }
}

/deep/ .el-menu-item {
  font-size: 16px;

}
</style>
